<!doctype html>
<html>
<head>
  <title>Vue Grid Demo</title>
  <!--
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  -->
  <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="col-md-12">
      <h1>Vue Grid</h1>
      <div class="row">
      <div class="col-md-6">
        <label for="search-query"></label>
        <input type="text" id="search-query" v-model="searchQuery" class="form-control" placeholder="Search..." style="width: 200px">
      </div>
      <div class="col-md-6">
        <pagination id="my-table" class="pull-right"></pagination>
      </div>
      </div>
      <grid rows="{{gridData}}" columns="{{gridColumns}}" filter-key="{{searchQuery}}" per-page="5" id="my-table"></grid>
      <hr>
      <grid rows="{{gridData2}}" columns="{{gridColumns2}}" per-page="10" id="another-table"></grid>
      <pagination id="another-table"></pagination>
    </div>
  </div>
  <!--
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.js"></script>
  -->
  <script src="../../lib/vue/0.12.1/vue.js"></script>
  <script src="../../lib/vue/vue-grid/vue-grid.js"></script>
  <script src="listviewer-v1.js"></script>

</body>
</html>
